﻿@using System.Web.Script.Serialization
@{
    ViewBag.Title = "List"; 
    Layout = "~/views/shared/_Layout.cshtml";
}

<h2>List</h2>

<table>
    
    <!-- ko foreach: Customers -->
    <tr>
        <td>
            <span data-bind="text:Name"></span>
        </td>
        <td>
            <span data-bind="text:Email"></span>
        </td>
        <td>
            <span data-bind="text:CustomerRoles"></span>
        </td>
    </tr>    
    <!--/ko-->
</table>

@{
    var model = ViewBag.Model;
    var jsonStr = new HtmlString(new JavaScriptSerializer().Serialize(model));
}

@section scripts{
    <script>
        var init = @jsonStr;

        function CustomerListItemModel(name, email, roles) {
            var self = this;
            self.Name = ko.observable(name);
            self.Email= ko.observable(email);
            self.CustomerRoles= ko.observable(roles);
        }
        function CustomerListModel() {
            var self = this;
            var tempCustomers =  $.isEmptyObject(init.Customers)? []: $.map(init.Customers, function (a) {
                return new CustomerListItemModel(a.Name, a.Email, a.CustomerRoles);
            });
            self.Customers = ko.observableArray(tempCustomers);
        }

        var vm = new CustomerListModel();
        ko.applyBindings(vm);

    </script>
}